body{
    flex-direction: column;
    justify-content: space-between;
   
    .main{
        flex: 1;
        overflow-y: scroll;
        // background-color: aqua;
    }
}
.swiper {
    
    height: 200px;
    .swiper-slide img{
        width: 100%;
    }
}  
.ranking{
    width: 90%;
    margin: 5%;
   
}
.ranking-today{
 flex: 2;
 position: relative;
 height: 150px;
 margin-right: 5%;
 border-radius: 15px;
 background-color: rgba(21, 146, 204, 100);

   p{
    position: absolute;
    left: 14px;
    top: 15px;
    width: 80px;
    height: 28px;
    color: rgba(0, 78, 115, 100);
    font-size: 20px;
    text-align: left;
   }
   div{
    position: absolute;
    left: 15px;
    top: 65px;
    width: 48px;
    height: 112px;
    color: rgba(255, 255, 255, 100);
    font-size: 30px;
    text-align: left;
   }
}
.ranking-clock{
 flex: 3;
 position: relative;
 height: 150px;
 border-radius: 15px;
 background-color: rgba(123, 203, 245, 100);
    p{
        position:absolute;
        left: 15px;
top: 15px;
width: 124px;
height: 28px;
color: rgba(0, 81, 119, 100);
font-size: 20px;
text-align: left;
font-family: PingFangSC-bold;
    }
    div{
        position: absolute;
        right:15px ;
top: 85px;
width: 100px;
height: 40px;
line-height: 33px;
border-radius: 20px;
background-color: rgba(255, 255, 255, 100);
color: rgba(0, 78, 115, 100);
font-size: 16px;
text-align: center;
font-family: Arial;
border: 3px solid rgba(0, 81, 119, 100);
    }
}
.exercise{
    width: 90%;
    margin: 5%;
    
    .exercise-data{
        background: url(../img/index-card-data.png);
        background-size: cover;
        flex: 2;
 height: 110px;
 margin-right: 5%;
 border-radius: 15px;
 background-color: red;
   
    }
    .exercise-badge{
        background: url(../img/index-card-badge.png);
        // background-color: rgba(123, 203, 245, 100);
        flex: 2;
        height: 110px;
        border-radius: 15px;
        background-color: rgb(97, 204, 236);
    }

}
.drill{
    background: url(../img/index-swiper-bg2.jpg) no-repeat ;
    background-size: cover;
    border-radius: 15px;
    height: 110px;
    width: 90%;
    margin: 5%;
}
.running{
    background: url(../img/index-card-run.png) no-repeat ;
    background-size: cover;
    border-radius: 15px;
    height: 110px;
    width: 90%;
    margin: 5%;
}
.footer{
    height: 60px;
     ul{
         line-height: 60px;
        width: 100%;
        justify-content: space-around;
        // padding: 0 68px;
        text-align: center;
    }
}